<!-- 工装位置  -->
<template>
    <div style="padding: 20px;flex: 1;display: flex;flex-direction: column;height: 100%;">
        <div style="font-size: 2vw;padding-bottom: 10px;">
            {{  props.title  }}
        </div>
        <div style="flex: 1;display: flex;gap: 7px;">
            <!-- 左侧内容区域，内容区域需要3等分.每个部分垂直布局 -->
            <div v-if="loaded" style="flex: 1;display: flex;gap: 10px; flex-direction: row-reverse; ">
                <!-- 1/3 -->
                <div style="display: flex;flex: 1;flex-direction: column;gap: 7px;">

                    <!-- 9行 -->
                    <div v-for="row in rowIds1" style="display: flex;flex: 1;gap: 3px; overflow: hidden;">
                        <div v-for="id in shelf.rows[row]" class="item"  :ref="(el)=> refs[`ref${id}`]=el"    style="background-color: black; ">
                            <div v-if="id == 1 || id == 8"> {{ id }}</div>
                        </div>
                    </div>

                    <!-- 尾巴描述信息 -->
                     <div style="text-align: center;">72-1 </div>
                </div>

                <!-- 2/3 -->
                <div style="display: flex;flex: 1;flex-direction: column;gap: 7px;">

                    <!-- 9行 -->
                    <div v-for="row in rowIds2" style="display: flex;flex: 1;gap: 3px; overflow: hidden;">
                        <div v-for="id in shelf.rows[row]" class="item" :ref="(el)=> refs[`ref${id}`]=el" style="background-color: black; ">
                            <div v-if="id == 1 || id == 8"> {{ id }}</div>
                        </div>
                    </div>
                    <!-- 尾巴描述信息 -->
                    <div style="text-align: center;">144-73 </div>
                </div>

                <!-- 3/3 -->
                <div style="display: flex;flex: 1;flex-direction: column;gap: 7px;">

                    <!-- 9行 -->
                    <div v-for="row in rowIds3" style="display: flex;flex: 1;gap: 3px; overflow: hidden;">
                        <div v-for="id in shelf.rows[row]" class="item" :ref="(el)=> refs[`ref${id}`]=el" style="background-color: black; ">
                            <div v-if="id == 1 || id == 8"> {{ id }}</div>
                        </div>
                    </div>
                      <!-- 尾巴描述信息 -->
                      <div style="text-align: center;">216-145 </div>
                </div>
                <!--  -->
                <!-- <div style="flex: 1;background-color: #242553fc;display: flex;flex-direction: column;gap: 3px;">
                <template v-for="row in 9">
                    <div style="display: flex; flex: 1; gap: 1px;">
                        <template v-for="col in 24">
                            <div style="flex: 1;display: flex; background-color: yellow;"> {{ (row-1)*24 +col }} </div>
                        </template>
</div>
</template>
</div> -->
            </div>

            <!-- 右侧标记 -->
            <div style="display: flex;flex-direction: column;gap: 7px;">
                <div>
                    <div style="background-color: black;width: 1vw;height: 1vh;display: inline-block;" />:空
                </div>
                <div>
                    <div style="background-color: green;width: 1vw;height: 1vh;display: inline-block;" />:未钎焊
                </div>
                <div>
                    <div style="background-color: blue;width: 1vw;height: 1vh;display: inline-block;" />:已钎焊
                </div>
                <div>
                    <div style="background-color: orange;width: 1vw;height: 1vh;display: inline-block;" />:已钎焊引导NG
                </div>
                <div>
                    <div style="background-color: yellow;width: 1vw;height: 1vh;display: inline-block;" />:空且放检测NG
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>

const props = defineProps({
  title: {
    type: String,
    default: '工装位置',
  },
})

const loaded = ref(false)
const refs = ref({});



const initPages = (start, end, rowIds) => {
    for (let i = end; i >= start; i--)
        rowIds.push(i)
}

let group1 = { rows: [] }
let group2 = { rows: [] }
let group3 = { rows: [] }

let rowIds1 = []
let rowIds2 = []
let rowIds3 = []

initPages(0, 8, rowIds1)
initPages(9, 17, rowIds2)
initPages(18, 26, rowIds3)

let shelf = { rows: [] }

const initGroup = (start, end, gp) => {
    let lastrow = -1
    for (let i = end; i >= start; i--) {
        
        refs.value[`ref${i}`] = ref(null);

        let row = parseInt(i / 8) 
        let fix = i % 8 > 0 ? 1 : 0
        row += fix

        row = row - 1
        //debugger
        if (!shelf.rows[row])
            shelf.rows[row] = []
        shelf.rows[row].push(i)
    }

    if (gp === 1) {
        group1.rows = shelf.rows.slice(0, 8)
    }
    if (gp === 2) {
        group2.rows = shelf.rows.slice(0, 8)
    }
    if (gp === 3) {
        group3.rows = shelf.rows.slice(0, 8)
    }
}
initGroup(1, 72, 1)
initGroup(73, 144, 2)
initGroup(145, 216, 3)
console.log('data.rows', group1)
console.log('data.rows', group2)
console.log('data.rows', group3)

let jkk = true
let cleaning = false
function changeStyle(myDiv) {
   
  if (myDiv) {
    jkk = !jkk
    myDiv.style.color =  'red'; // 修改字体颜色
    if(cleaning)
        myDiv.style.backgroundColor = 'black'; // 修改背景颜色
    else
        myDiv.style.backgroundColor = jkk? 'yellow':'blue'; // 修改背景颜色
  }
}
loaded.value = true
onMounted(()=>{
    let jk = 0
    setInterval(() => {
        if(loaded.value)
    {
        jk++
        if(jk == 217)
            {
                jk =1
                jkk = !jkk
                cleaning = !cleaning
            }
        changeStyle(refs.value[`ref${jk}`])
    }
        
    }, 30);

})

</script>

<style lang='scss' scoped>
.item {
    flex: 1;

    box-sizing: border-box;
    /* 确保padding和border不会影响宽度计算 */
    overflow: hidden;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>